<template>
  <div
    class="cardWall-box"
    v-loading="loading">
    <div
      class="cardWallTitle"
      v-if="hasCheck">
      <span>请为该分组选择资质证件</span>
      <span class="total">
        已选择1项
      </span>
      <el-button type="text">清空</el-button>
    </div>
    <div class="cardPage">
      <el-card
        class="licenceCard"
        v-for="i in 3"
        :key="'l'+i">
        <p class="licenceCardTitle">
          三类医疗器械经营许可证
        </p>
        <div class="licenceDetail">
          <img
            src="http://temp.im/174x120"
            alt="">
          <div>
            <p>
              <span>有效期从</span>
              <span>2017-01-01</span>
            </p>
            <p>
              <span>截止日期</span>
              <span>2017-01-01</span>
            </p>
            <p>
              <span>长期有效</span>
              <span>否</span>
            </p>
            <p>
              <span>证件编号</span>
              <span>8476598612786</span>
            </p>
            <p>
              <span>证件名称</span>
              <span>8476598612786</span>
            </p>
          </div>
        </div>
        <el-checkbox
          v-if="hasCheck"
          class="cardCheck"/>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CardWall',
  data () {
    return {
      checked: ''
    }
  },
  props: {
    hasCheck: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.cardWall-box {
  // 证件card样式
  .cardPage {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    align-content: flex-start;
    justify-content: start;

    .licenceCard {
      display: inline-block;
      width: 376px;
      border-radius: 0;
      box-shadow: initial;
      margin: 0 16px 20px 0;
      position: relative;

      .licenceCardTitle {
        margin-bottom: 24px;
      }

      .licenceDetail {
        display: flex;

        img {
          margin-right: 10px;
          width: 174px;
          height: 120px;
        }

        p span:first-child {
          color: #93a0b2;
          margin-right: 4px;
        }
      }

      .cardCheck {
        position: absolute;
        right: 16px;
        top: 10px;
      }
    }
  }
}

</style>
